{% extends "admin/layout.html" %}

{% block title %}项目级别管理 - {{ super() }}{% endblock %}

{% block content %}
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2">项目级别管理</h1>
    <div class="btn-toolbar mb-2 mb-md-0">
        <button type="button" class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#addLevelModal">
            <i class="fas fa-plus"></i> 添加级别
        </button>
    </div>
</div>

<div class="card shadow-sm">
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>级别名称</th>
                        <th>优先级</th>
                        <th>颜色</th>
                        <th>项目数量</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    {% for level in levels %}
                    <tr>
                        <td>
                            <span class="badge" style="background-color: {{ level.color }}; color: white;">
                                {{ level.name }}
                            </span>
                        </td>
                        <td>{{ level.priority }}</td>
                        <td>
                            <div style="display: inline-block; width: 20px; height: 20px; background-color: {{ level.color }}; border: 1px solid #ddd;"></div>
                            <small class="text-muted ms-1">{{ level.color }}</small>
                        </td>
                        <td>
                            <span class="badge bg-primary">{{ level.projects|length }}</span>
                        </td>
                        <td>
                            <div class="btn-group btn-group-sm">
                                <button type="button" class="btn btn-outline-primary"
                                        data-bs-toggle="modal" data-bs-target="#editLevelModal"
                                        data-id="{{ level.id }}" data-name="{{ level.name }}"
                                        data-priority="{{ level.priority }}" data-color="{{ level.color }}">
                                    编辑
                                </button>
                                <form method="post" action="{{ url_for('jira.delete_level', level_id=level.id) }}" class="d-inline">
                                    <button type="submit" class="btn btn-outline-danger"
                                            onclick="return confirm('确定删除此级别吗？相关项目将变为无级别状态。')">
                                        删除
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="5" class="text-center text-muted">暂无项目级别</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- 添加级别模态框 -->
<div class="modal fade" id="addLevelModal" tabindex="-1" aria-labelledby="addLevelModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addLevelModalLabel">添加项目级别</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form method="post" action="{{ url_for('jira.add_level') }}">
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="name" class="form-label">级别名称</label>
                        <input type="text" class="form-control" id="name" name="name" required>
                    </div>
                    <div class="mb-3">
                        <label for="priority" class="form-label">优先级</label>
                        <input type="number" class="form-control" id="priority" name="priority" min="0" value="0">
                        <small class="form-text text-muted">数字越大，优先级越高</small>
                    </div>
                    <div class="mb-3">
                        <label for="color" class="form-label">颜色</label>
                        <input type="color" class="form-control" id="color" name="color" value="#007bff">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-primary">添加</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 编辑级别模态框 -->
<div class="modal fade" id="editLevelModal" tabindex="-1" aria-labelledby="editLevelModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editLevelModalLabel">编辑项目级别</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form method="post" action="{{ url_for('jira.edit_level') }}">
                <input type="hidden" id="edit_id" name="id">
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="edit_name" class="form-label">级别名称</label>
                        <input type="text" class="form-control" id="edit_name" name="name" required>
                    </div>
                    <div class="mb-3">
                        <label for="edit_priority" class="form-label">优先级</label>
                        <input type="number" class="form-control" id="edit_priority" name="priority" min="0">
                        <small class="form-text text-muted">数字越大，优先级越高</small>
                    </div>
                    <div class="mb-3">
                        <label for="edit_color" class="form-label">颜色</label>
                        <input type="color" class="form-control" id="edit_color" name="color">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-primary">保存</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 编辑模态框数据填充
    const editModal = document.getElementById('editLevelModal');
    editModal.addEventListener('show.bs.modal', function(event) {
        const button = event.relatedTarget;
        const id = button.getAttribute('data-id');
        const name = button.getAttribute('data-name');
        const priority = button.getAttribute('data-priority');
        const color = button.getAttribute('data-color');

        document.getElementById('edit_id').value = id;
        document.getElementById('edit_name').value = name;
        document.getElementById('edit_priority').value = priority;
        document.getElementById('edit_color').value = color;
    });
});
</script>
{% endblock %}